I.Gioi thieu
HTML là viết tắt của HyperText Makeup Language (ngôn đánh dấu siêu văn bản).
Như các bạn đã biết, một trang web dù phức tạp thế nào cũng chỉ là một file text, được lưu dưới phần mở rộng là .htm hoặc html. Trong file này bao gồm các đoạn text được viết theo một qui tắc nhất định nhằm giúp trình duyệt có thể đọc được và hiển thị lên màn hình trình duyệt.
Nói một cách dễ hiểu, tập tin HTML cũng giống như một file mã nguồn của một ngôn ngữ lập trình nào đó (như c, c++, pascal...) được trình dịch dịch thành mã máy và thi hành.
II.Cau truc co ban cua mot file HTML
1.Gioi thieu ve the(tag)
Nội dung của một tập tin html bao gồm các thẻ (tag) được biểu diễn dưới dạng <tênthẻ> (chú ý cặp dấu "<>") dùng để định dạng cho một đối tượng text (đoạn văn, câu...) hoặc một đối tượng không phải text (hình ảnh, bảng biểu...).
Một thẻ được mở và đóng dưới dạng "<tênthẻ>Nội dung bên trong thẻ</tênthẻ>", trong đó, "nội dung bên trong thẻ" chính là đoạn text sẽ được hiển thị. Một thẻ có thể mở nhưng không đóng, ví dụ thẻ dùng để xuống dòng (nhưng không hết đoạn): <br>, đường kẻ ngang <hr>... Các thẻ không đóng này thường là các đối tượng như hình ảnh, đối tượng nhúng (embed)...
Lưu ý: Thẻ dùng để chèn chú thích (không được hiển thị lên màn hình) có dạng
<!-- nội dung chú thích -->.
Một thẻ gồm có các thuộc tính (attribute). Các thuộc tính này quy định định dạng của đối tượng bên trong thẻ. Thuộc tính được viết ngay sau tên thẻ cách tên thẻ và cách nhau (nếu có nhiều thuộc tính) bằng một khoảng trắng. Một thuộc tính có tên thuộc tính và nội dung thuộc tính, nội dung thuộc tính được viết trong cặp dấu " (hoặc có thể không cần) tên thuộc tính và nội dung thuộc tính đuợc nối với nhau bằng dấu "=". Ví dụ <tênthẻ thuộctính1="nộidungthuộctính1" thuộctính2="nộidungthuộctính2">
Lưu ý: Một thẻ có thể không có thuộc tính nào hoặc chỉ có thuộc tính mà không có nội dung.
Ví dụ:
<p align="center">
p: tên thẻ
align: tên thuộc tính (ở đây qui định cách căn lề)
center: chỉ tính chất của thuộc tính (ở đây là căn giữa)
2. Cấu trúc cơ bản của một file HTML
Một file HTML thường có cấu trúc như sau:
<html>
<head>
</head>
<body>
</body>
</html>
+ Thẻ <html></html>: Thẻ mở đầu cho một file HTML, có thể vắng mặt.
+ Thẻ <head>: Thẻ <head> dùng để giới thiệu một số tính chất của một tập tin HTML, thường bao gồm các thẻ con sau:
-title></title>: Tiêu đề của văn bản HTML, sẽ được hiển thị lên thanh tiêu đề của trình duyệt. Nội dung tiêu đề được đặt trong cặp thẻ đóng mở. Thẻ này không có thuộc tính.
-<meta> (không đóng thẻ): Xác định một số thuộc tính của văn bản, tùy theo từng thuộc tính kèm theo và nội dung của từng thuộc tính ấy. Thẻ này không được đóng và chỉ bao gồm các thuộc tính. Ví dụ:
><meta http-equiv="content-type" content="text/html; charset=utf-8">: Qui định định dạng tập tin và charset của tập tin (tìm hiểu ở phần sau) (ở đây là tập tin HTML với charset là utf-8)
><meta name="robots" content="all,follow">: Khi website tìm kiếm (ví dụ google...) đọc được tag này, nó sẽ quyết định có lưu trang đó vào cơ sở dữ liệu hay không. Nếu thuộc tính content là "all, follow", nó sẽ lưu vào cơ sở dữ liệu, nếu thuộc tính là "noindex, nofollow", nó sẽ không lưu vào.
-<script></script>: Dùng để nhúng các đoạn javascript.
-<style></style>: Định dạng style (tìm hiểu ở phần sau).
+ Thẻ <body></body>: Đây là phần thân của tập tin HTML, các đoạn text hoặc đối tượng thường nằm trong thẻ này (có thể nằm ngoài). thẻ <body> có các thuộc tính như bgcolor - định màu nền cho văn bản, background - định ảnh nền cho văn bản...
III.Ngon ngu hien thi charset
Thông thường nếu bạn tạo một văn bản HTML có dấu Tiếng Việt (hoặc bất kì ngôn ngữ nào khác), văn bản đó sẽ được hiển thị với ngôn ngữ đó tùy thuộc vào font chữ mà bạn dùng có hiển thị được ngôn ngữ đó không. Nếu font chữ đó không hỗ trợ ngôn ngữ mà bạn viết, nội dung sẽ không được hiển thị chính xác.
Các font chữ thường được sử dụng trong ngôn ngữ HTML là Verdana, Times New Roman, Arial... Đây là các font chữ hỗ trợ tiếng Việt Unicode và một số ngôn ngữ khác. Tuy nhiên, không phải mọi ngôn ngữ nào trên thế giới cũng được hỗ trợ, đôi khi bạn cần phải cài đặt thêm một language pack.
Nhưng có một vấn đề nảy sinh khi thể hiện các kí tự unicode này. Một kí tự unicode trong mã nguồn của tập tin HTML có thể được thể hiện bằng nhiều cách khác nhau, tùy thuộc và cách nội dung của tập tin được mã hóa. Cách mã hóa đó được gọi là charset (cái này là theo mình hiểu). Ví dụ kí tự "ă" trong mã nguồn được thể hiện với charset windows-1252 (western european) là "ă", nhưng sẽ vẫn là "ă" nếu sử dụng charset UTF-8. Tuy nhiên, khi sử dụng charset UTF-8 để viết mã nguồn nhưng được giải mã với charset windows-1252 sẽ được thể hiện là "ă".
Khi thiết kế web sử dụng Tiếng Việt, thông thường charset utf-8 sẽ được chọn vì các kí tự có dấu sẽ được giữ nguyên cách thể hiện trong cả mã nguồn lẫn khi hiển thị, charset windows-1252 cũng được sử dụng nhưng không phổ biến lắm vì các kí tự có dấu trong mã nguồn sẽ được mã hóa và rất khó để chỉnh sửa mã nguồn, đồng thời cũng gây ra một số vấn đề hiển thị không như mong muốn khi sử dụng các hộp thoại có sử dụng dấu.
Để sử dụng một charset, cần khai báo thẻ <meta> có nội dung như sau ngay trong thẻ <head>
<meta http-equiv="content-type" content="text/html; charset=tên charset">
Ví dụ, để sử dụng unicode: <meta http-equiv="content-type" content="text/html; charset=utf-8">
IV.Bai tap minh hoa
Trước khi thực hiện các bài tập, bạn nên tải sử dụng phần mềm EditPlus để viết mã nguồn một cách thuận tiện hơn, nếu không có Editplus, bạn có thể dùng notepad để thay thế nhưng phải thiết lập font chữ cho notepad là Courier New (hoặc bất cứ font chữ nào có hỗ trợ Tiếng Việt Unicode).
Lưu ý khi lưu file với notepad: Bạn phải chọn Encoding là UTF-8 (ở khung Encoding)
Đối với Editplus, dùng username và key sau để đăng kí:
1. Mở editplus (hoặc notepad) lên và gõ 1 đoạn có nội dung như sau (Lưu ý các kí tự được mã hóa):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
title>Chào các bạn</title>
</head>
<body>
Xin chào tất cả các bạn đã đến với "HTML cơ bản - Mỗi tuần một bài học"
</body>
</html>
Sau đó lưu lại thành file bai1.html và mở lên để quan sát cách các kí tự được thể hiện.
2. Tương tự, hãy tạo một file khác và lưu thành file bai2.html, thay charset bằng utf-8 và gõ nội dung bất kì có dấu rồi mở lên và quan sát cách thể hiện.
Sau khi mở file bai2.html lên, thử thay đổi encode thành Western European và để ý cách các kí tự có dấu được thể hiện. (Bằng cách vào View -> Encoding -> Western European (Windows))
3. Tạo một file có tên bai3.html thực hiện các yêu cầu sau:
+ Hiển thị lên thanh tiêu đề nội dung là "Xin chào".
+ Có nội dung là "Xin chào các bạn, tôi là <tên bạn>".
Sử dụng charset là UTF-8
4.Để định dạng màu nền và hình nền cho một trang web, nguời ta sử dụng các thuộc tính sau cho thẻ <body>:
+ bgcolor: màu nền cho trang web. Nội dung thuộc tính là các mã màu.
+ background: hình nền cho trang web. Nội dung thuộc tính là địa chỉ của hình nền.
Yêu cầu: Hãy tạo một trang với màu nền là xanh duơng (mã màu là #0000ff), một trang khác có hình nền bất kì.